<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟dom与diff算法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    th,
    td {
        border: 1px solid black;
    }
</style>

<body>

    <div id="app">
        <h1>{{msg}}</h1>

        <button @click="add">添加首行元素 </button>
        <table>
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量值</th>
                <th>选择</th>
            </tr>

            <!-- 
                v-for指令所在的标签中，还有一个非常重要的属性 
                    :key
                如果没有指定 :key 属性，会自动拿index作为key
                这个key是这个dom元素的身份证号/唯一标识

                分析一下，采用 index 作为key ，有什么问题？
                    第一个问题：效率低
                    第二个问题：产生了错乱。尤其是对数组当中的某些元素进行操作。（非末尾元素）
                怎么解决这个问题？
                    建议使用对象id作为key
            -->
            <tr v-for="(hero,index) in heros" :key="hero.id">
                <td>{{index+1}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox" /></td>
            </tr>
        </table>
        <hr>
        <h3>图解</h3>
        <img src="../img/diff.jpg" />
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '虚拟dom与diff算法',
                heros: [
                    { id: 101, name: '艾格文', power: 10000 },
                    { id: 102, name: '麦迪文', power: 9000 },
                    { id: 103, name: '古尔丹', power: 8000 },
                    { id: 104, name: '萨尔', power: 6000 },
                ]
            },
            methods: {
                add() {
                    this.heros.unshift({ id: 105, name: '宙斯', power: 6000 })
                }
            }
        })
    </script>


</body>


</html>